<template>
  <PageWrapper>
    <template #headerContent>
      <h1 style="font-size: 20px; line-height: 40px">Lottie动画示例</h1>
    </template>

    <el-alert
      title="基于lottie-web进一步封装，可在 https://lottiefiles.com/ 该网站找到您心仪的动画"
      type="success"
      :closable="false"
    />

    <div class="box">
      <Lottie
        width="400px"
        height="300px"
        src="https://assets3.lottiefiles.com/packages/lf20_elqubb3f.json"
      />
      <Lottie
        width="400px"
        height="300px"
        src="https://assets4.lottiefiles.com/packages/lf20_jyrxvzzj.json"
      />
      <Lottie
        width="400px"
        height="300px"
        src="https://assets3.lottiefiles.com/packages/lf20_2jbzmbru.json"
      />
      <Lottie
        width="400px"
        height="300px"
        src="https://assets9.lottiefiles.com/packages/lf20_afwjhfb2.json"
      />
      <Lottie
        width="400px"
        height="300px"
        src="https://assets6.lottiefiles.com/packages/lf20_iwlmrnb5.json"
      />
      <Lottie
        width="400px"
        height="300px"
        src="https://assets10.lottiefiles.com/packages/lf20_xiussssy.json"
      />
    </div>
  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { PageWrapper } from '@/components/Page/index'
import { Lottie } from '@/components/Lottie'

export default defineComponent({
  components: {
    PageWrapper,
    Lottie
  },
  setup() {
    return {}
  }
})
</script>

<style scoped>
.box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
</style>
